<template>
<el-dialog id="loginDialog" :visible.sync="loginVisible" fullscreen :show-close="false" :modal-append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-container>
        <el-header style="height: 20vh"></el-header>
        <el-main style="height: 60vh;min-height: 320px">
            <el-row style="height: 100%">
                <el-col :xs="0" :md="9" :lg="9" :xl="9">&nbsp;</el-col>
                <el-col :xs="24" :md="6" :lg="6" :xl="6" style="height: 100%">
                    <el-card v-loading="loginLoading" class="box-card" style="height: 100%">
                        <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
                            <el-form-item prop="username">
                                <el-input v-model="formLogin.username" type="text" placeholder="用户名">
                                    <svg slot="prepend" class="svg-icon">
                                        <use :xlink:href="'#icon-user'" />
                                    </svg>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input v-model="formLogin.password" type="password" placeholder="密码">
                                    <svg slot="prepend" class="svg-icon">
                                        <use :xlink:href="'#icon-lock'" />
                                    </svg>
                                </el-input>
                            </el-form-item>
                            <el-button size="default" style="width: 100%" type="primary" class="button-login" @click="submit">登录</el-button>
                        </el-form>
                    </el-card>
                </el-col>
                <el-col :xs="0" :md="9" :lg="9" :xl="9">&nbsp;</el-col>
            </el-row>
        </el-main>
        <el-footer style="height: 20vh"></el-footer>
    </el-container>
</el-dialog>
</template>

<script>
import {
    mapActions
} from "vuex";
export default {
    name: "Login",
    data() {
        return {
            loginVisible: false,
            loginLoading: false,
            formLogin: {
                username: "",
                password: "",
            },
            rules: {
                userCode: [{
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur"
                }],
                password: [{
                    required: true,
                    message: "请输入密码",
                    trigger: "blur"
                }]
            }
        };
    },
    methods: {
        ...mapActions("app", ["login"]),
        submit() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loginLoading = true;
                    this.login(this.formLogin)
                        .then(() => {
                            debugger
                            this.loginVisible = false;
                        })
                        .catch(error => {
                            console.log(error);
                        })
                        .finally(() => {
                            // this.loginVisible = false;
                            this.loginLoading = false;
                        });
                }
            });
        }
    },
    mounted() {
        if (!this.$store.getters["app/loginData"]) {
            this.loginVisible = true;
        }
        this.$store.subscribe(mutation => {
            if (mutation.type == "app/SET_LOGIN_DATA" && !mutation.payload) {
                this.loginVisible = true;
            }
        });
        // this.loginVisible = false;
    }
};
</script>

<style>
#loginDialog .el-dialog__body {
    height: 100%;
    padding: 0px;
}

#loginDialog .el-dialog__header {
    padding: 0px;
}

.login-code {
    height: 38px;
    display: block;
    margin: 0px -20px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
</style>
